<template>
  <div class="container">
    <!-- 头部 -->
    <div class="top-bar">
      <div class="tab-bar">
        <div class="tab clearfix">
          <div class="tab-item"
               :class="{'active':index==list_type}"
               v-for="(item, index) in tab_arr"
               :key="index"
               @tap="toggle_tab(index)">
            {{item.msg}}
          </div>
        </div>
        <div class="search-btn"
             @tap="to_search()">
          <img :src="base_url+'/mp_3.2.4/%E5%8D%A1%E5%88%B8%E8%B4%AD%E4%B9%B0/%E6%90%9C%E7%B4%A2/iOS/%E6%94%BE%E5%A4%A7%E9%95%9C%20(1)%403x.png'"
               v-if="base_url"
               alt=""
               class="img">
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="store-list">
      <swiper :current="list_type"
              @change="change_list">
        <!-- 卡列表 -->
        <block>
          <swiper-item>
            <div class="card">
              <scroll-view scroll-y
                           scroll-with-animation
                           @scrolltolower="loadmore"
                           style="height:100%"
                           enable-back-to-top="true">
                <ul class="list">
                  <li class="list-item"
                      v-for="(item, index) in card_arr"
                      :key="index"
                      @tap="to_detail(item)">
                    <card :card_info="item"></card>
                  </li>
                </ul>
              </scroll-view>
            </div>
          </swiper-item>
        </block>
        <!-- 券列表 -->
        <block>
          <swiper-item>
            <div class="ticket">
              <scroll-view scroll-y
                           scroll-with-animation
                           @scrolltolower="loadmore"
                           style="height:100%"
                           :enable-back-to-top="true">
                <ul class="list">
                  <li class="list-item"
                      v-for="(item, index) in ticket_arr"
                      :key="index"
                      @tap="to_detail(item)">
                    <ticket :ticket_info="item"></ticket>
                  </li>
                </ul>
              </scroll-view>
            </div>
          </swiper-item>
        </block>
      </swiper>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
import card from '@/components/ct_store/card'
import ticket from '@/components/ct_store/ticket'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      // 0 卡  1 优惠券
      list_type: 0,
      tab_arr: [
        {
          msg: '卡'
        }, {
          msg: '优惠券'
        },
      ],
      ticket_arr: [],
      card_arr: [],
      page: 1,
      isbottom: false
    };
  },
  methods: {
    //   切换tab
    toggle_tab (tab_index) {
      this.list_type = tab_index
    },
    // 滑动列表滑块
    change_list (e) {
      this.list_type = e.mp.detail.current
      this.page = 1
      this.isbottom = false
      this.get_list()
    },
    // 获取列表
    get_list () {
      if (this.isbottom) {
        return false
      }
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_5/c2c/card_ticket_list", {
        type: this.list_type + 1,
        size: 10,
        page: this.page
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          console.log(res);
          //   转时间戳
          if (res.data.data) {
            res.data.data.forEach(item => {
              if (item.validity_start_time) {
                item.validity_start_time = new Date(item.validity_start_time * 1000).Format("yyyy.MM.dd")
              }
              if (item.validity_end_time) {
                item.validity_end_time = new Date(item.validity_end_time * 1000).Format("yyyy.MM.dd")
              }
            });
          }
          switch (this.list_type) {
            // 卡  
            case 0:
              if (this.page == 1) {
                this.card_arr = res.data.data
              } else if (this.page > 1 && res.data.data.length > 0) {
                this.card_arr.push(...res.data.data)
              } else if (this.page > 1 && res.data.data.length == 0) {
                this.isbottom = true
              }

              break;
            //   优惠券
            case 1:
              if (this.page == 1) {
                this.ticket_arr = res.data.data
              } else if (this.page > 1 && res.data.data.length > 0) {
                this.ticket_arr.push(...res.data.data)
              } else if (this.page > 1 && res.data.data.length == 0) {
                this.isbottom = true
              }
              break;

            default:
              break;
          }
        }
      })
    },
    // 加载更多
    loadmore () {
      if (this.isbottom) {
        return false
      }
      this.page++
      this.get_list()
    },
    // 去搜索
    to_search () {
      wx.navigateTo({ url: '/pages/ct_store/ct_search/main' });
    },
    // 跳转卡券详情
    to_detail (item) {
      wx.navigateTo({ url: `/pages/ct_store/ct_detail_store/main?id=${item.id}&source=1` });
    }
  },
  components: {
    card, ticket
  },
  onLoad (options) {
    let that = this
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    wx.setNavigationBarTitle({ title: '卡券商城' });
    wx.setNavigationBarColor({
      frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: '#3EB0A9', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.get_list()
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.4/%E7%9F%A9%E5%BD%A2%E5%A4%87%E4%BB%BD%207%402x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: rgba(243, 244, 246, 1);
  .top-bar {
    width: 100%;
    height: 94px;

    position: relative;
    .tab-bar {
      width: 100%;
      min-height: 20px;
      position: absolute;
      top: 16px;
      left: 0;
      display: flex;
      .tab {
        flex: 1;
        padding-left: 15px;
        .tab-item {
          font-size: 16px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 255, 255, 0.4);
          line-height: 22px;
          padding-bottom: 8px;
          margin-right: 40px;
          float: left;
          position: relative;
          &.active {
            font-size: 16px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 22px;
            &::before {
              content: "";
              width: 22px;
              height: 4px;
              background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.38) 100%
              );
              border-radius: 2px;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
      .search-btn {
        width: 16px;
        height: 16px;
        float: right;
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
        margin-top: 5px;
        .img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
  .store-list {
    width: 100%;
    flex: 1;
    margin-top: -32px;
    z-index: 10;
    swiper {
      width: 100%;
      height: 100%;
    }

    .card,
    .ticket {
      width: 100%;
      height: 100%;
      .list {
        margin: 0 12px;
        .list-item {
          margin-bottom: 13px;
        }
      }
    }
  }
}
</style>

